<template>
	<view class="head-fixed child-view" style="background-color: rgb(41, 41, 64);">
		<view class="info-box">
			<view class="back-home blur-bg text-color-white round" @click="routerBack()">
				<image class="wh-30" src="/static/gane/goBack-white-icon.png"></image>
				<span class="text-bold" style="margin-left: 10rpx;">首页</span>
			</view>

			<view class="countdown-box" v-if="countdown > 0">
				<!-- 圆形进度条容器 -->
				<view class="progress-circle" :style="progressStyle">
					<!-- 遮罩层，用于显示中间的空白区域 -->
					<view class="mask">
						<!-- 显示进度文字 -->
						<text class="progress-text">{{ countdown }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content-box">
			<view class="flex-wrap stage-box padding-xs padding-top-0 margin-top-xxs text-sml">
				<view v-for="(item,index) in items" :key="index" class="item"
					:class="{'stageClass': index === 0 || index === 2 || index === 4}" @click="Betting(item)">
					<view class="rel text-center" :class="getColor(index)">
						<view class="text-bold-lg">
							{{item.type}}
						</view>
						<view class="text-sm">
							{{item.value}}
						</view>
					</view>
				</view>
			</view>

			<view class="padding-xs chips-box padding-top-0">
				<view class="van-row van-row--justify-space-between">
					<view class="van-col van-col--3" v-for="(item,index) in chipList" :key="index"
						:class="{'active': activeIndex == index}" @click="selMoney(index)">
						<image class="full-width dib" :src="`/static/bjl/${item}.png`" mode="widthFix"></image>
					</view>
				</view>
			</view>

			<view class="padding-xs padding-top-0">
				<view class="roadmap-box">
					<view class="top rel disflex van-row--justify-space-between" style="align-items: stretch; ">
						<template v-for="(item,index) in roadmapList" :key="index">
							<view class="text-center text-bold text-xs" :class="roadmaps[index]">
								<view>
									{{item.title}}
								</view>
								<view class="text-bold-lg">
									{{item.value}}
								</view>
							</view>

							<view class="line" v-if="index < roadmapList.length - 1" :class="roadmaps[index]">

							</view>
						</template>
					</view>
				</view>


				<view class="rel bg-white overflow" style="display: flex;">
					<view class="rel bg-white overflow">
						<view class="map-title">
							珠盘路
						</view>
						<view class="map-box overflow-x-scroll" style="width: 246rpx;height: 370rpx;">
							<view class="map-bg">
								<view class="map-item" v-for="(item,index) in maps" :key="index"
									:style="`top:${countTop(index)}rpx;left:${countLeft(index)}rpx`">
									<image style="width: 70%;height: 70%;" :src="`/static/bjl/zp-win-${item}.png`">
									</image>
								</view>
							</view>
						</view>
					</view>

					<view class="rel bg-white overflow">
						<view class="rel">
							<view class="map-title">
								大路
							</view>
							<view class="dl-map-box overflow-x-scroll" style="width: 536rpx; height: 246rpx;">
								<view class="map-bg"
									style="min-width: 100%; background-size: 41rrpx 41rpx; width: 64px;">
									<view class="map-item" v-for="(item,index) in dlMaps" :key="index"
										:style="`top:${countDlTop(index)}rpx;left:${countDlLeft(index)}rpx`">
										<image style="width: 70%;height: 70%;" :src="`/static/bjl/dl-${item}.png`">
										</image>
									</view>
								</view>
							</view>
						</view>

						<view class="rel disflex map-other">
							<view class="rel">
								<view class="map-title">
									大眼路
								</view>
								<view class="dyz-map-box overflow-x-scroll" style="width: 168rpx; height: 116rpx;">
									<view class="map-bg"
										style="min-width: 100%; background-size: 18rpx 18rpx; width: 118rpx;">
										<view v-for="(item,index) in dylMaps" :key="index" class="map-item"
											style="width: 18rpx; height: 18rpx;"
											:style="`top:${countDylTop(index)}rpx;left:${countDylLeft(index)}rpx`">
											<image mode="widthFix" style="width: 70%"
												:src="`/static/bjl/dyz-${item}.png`">
											</image>
										</view>
									</view>
								</view>
							</view>

							<view class="rel">
								<view class="map-title">
									小路
								</view>
								<view class="dyz-map-box overflow-x-scroll" style="width: 168rpx; height: 116rpx;">
									<view class="map-bg"
										style="min-width: 100%; background-size: 18rpx 18rpx; width: 118rpx;">
										<view v-for="(item,index) in xlMaps" :key="index" class="map-item"
											style="width: 18rpx; height: 18rpx;"
											:style="`top:${countDylTop(index)}rpx;left:${countDylLeft(index)}rpx`">
											<image mode="widthFix" style="width: 70%;display: block;"
												:src="`/static/bjl/xyz-${item}.png`">
											</image>
										</view>
									</view>
								</view>
							</view>

							<view class="rel">
								<view class="map-title">
									曱甴路
								</view>
								<view class="dyz-map-box overflow-x-scroll" style="width: 168rpx; height: 116rpx;">
									<view class="map-bg"
										style="min-width: 100%; background-size: 18rpx 18rpx; width: 118rpx;">
										<view v-for="(item,index) in yyMaps" :key="index" class="map-item"
											style="width: 18rpx; height: 18rpx;"
											:style="`top:${countDylTop(index)}rpx;left:${countDylLeft(index)}rpx`">
											<image mode="widthFix" style="width: 70%;display: block;"
												:src="`/static/bjl/yy-${item}.png`">
											</image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 下注 -->
			<view class="chips-item">
				<img v-for="(item,index) in bettingList" :key="index" :src="`/static/bjl/${item.money}.png`"
					:style="item.style">
			</view>
		</view>


		<!-- 开奖扑克 -->
		<div class="poker-open" v-if="drawTheWinnerDomShow">
			<div class="box">
				<!-- 闲 -->
				<div class="item rel fl" :class="{l: !drawTheWinnerShow}">
					<div class="disflex justify-center">
						<div class="card-x" :class="{'open-x': openXT}">
							<div class="card box-shadow" :class="{open: openXT}"><img class="back"
									src="/static/bjl/back-00fb6039.png">
								<div class="card-open"><img src="/static/bjl/fA.png"></div>
							</div>
						</div>
					</div>
					<div class="rel from-blue-500 card-box">
						<div class="disflex justify-center">
							<div class="padding-left-xs padding-right-xs">
								<div class="card" :class="{open: openX}"><img class="back"
										src="/static/bjl/back-00fb6039.png">
									<div class="card-open"><img src="/static/bjl/m7.png"></div>
								</div>
							</div>
							<div class="padding-left-xs padding-right-xs">
								<div class="card" :class="{open: openX}"><img src="/static/bjl/back-00fb6039.png">
									<div class="card-open"><img src="/static/bjl/f9.png"></div>
								</div>
							</div>
						</div>
						<div class="title line-height-xs text-center">
							<div class="text-bold-lg text-xs">PLAYER</div>
							<div class="text-bold-lg text-default">闲</div>
						</div>
						<div class="number text-color-white padding-right-xs"><span
								class="number-font text-bold-lg">6</span><span
								class="text-default text-bold-lg">点</span></div>
					</div>
				</div>
				<!-- 庄 -->
				<div class="item rel fl" :class="{r: !drawTheWinnerShow}">
					<div class="disflex justify-center">
						<div class="card-x" :class="{'open-x': openZT}">
							<div class="card" :class="{open: openZT}"><img class="back"
									src="/static/bjl/back-00fb6039.png">
								<div class="card-open"><img src="/static/bjl/fA.png"></div>
							</div>
						</div>
					</div>
					<div class="rel from-red-500 card-box">
						<div class="disflex justify-center">
							<div class="padding-left-xs padding-right-xs">
								<div class="card" :class="{open: openZ}"><img class="back"
										src="/static/bjl/back-00fb6039.png">
									<div class="card-open"><img src="/static/bjl/m5.png"></div>
								</div>
							</div>
							<div class="padding-left-xs padding-right-xs">
								<div class="card" :class="{open: openZ}"><img src="/static/bjl/back-00fb6039.png">
									<div class="card-open"><img src="/static/bjl/f3.png"></div>
								</div>
							</div>
						</div>
						<div class="title line-height-xs text-center">
							<div class="text-bold-lg text-xs">BANKER</div>
							<div class="text-bold-lg text-default">庄</div>
						</div>
						<div class="number number-2 text-color-white padding-left-xs"><span
								class="number-font text-bold-lg">8</span><span
								class="text-default text-bold-lg">点</span></div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						type: '小',
						value: '1:1.5',
						minL: 10,
						maxL: 60,
						minT: 7,
						maxT: 73
					},
					{
						type: '闲对',
						value: '1:11',
						minL: 60,
						maxL: 136,
						minT: 7,
						maxT: 73
					},
					{
						type: '幸运6',
						value: '最高1:20',
						minL: 157,
						maxL: 210,
						minT: 7,
						maxT: 73
					},
					{
						type: '庄对',
						value: '1:11',
						minL: 230,
						maxL: 282,
						minT: 7,
						maxT: 73
					},
					{
						type: '大',
						value: '1:0.5',
						minL: 302,
						maxL: 355,
						minT: 7,
						maxT: 73
					},
					{
						type: '闲',
						value: '1:1',
						minL: 10,
						maxL: 111,
						minT: 90,
						maxT: 158
					},
					{
						type: '和',
						value: '1:8',
						minL: 133,
						maxL: 235,
						minT: 90,
						maxT: 158
					},
					{
						type: '庄',
						value: '1:0.95',
						minL: 256,
						maxL: 354,
						minT: 90,
						maxT: 158
					}
				],
				chipList: [10, 50, 100, 500, 1000, 5000, 10000],
				activeIndex: 0,
				roadmapList: [{
						title: '庄',
						value: 5
					},
					{
						title: '闲',
						value: 11
					},
					{
						title: '和',
						value: 3
					},
					{
						title: '庄对',
						value: 0
					},
					{
						title: '闲对',
						value: 3
					},
					{
						title: '幸运6',
						value: 1
					}
				],
				roadmaps: ['text-yellow-500', 'text-blue-500', 'text-green-500', 'text-yellow-500', 'text-blue-500',
					'text-pink-500'
				],
				maps: ['x', 'z', '6', 'h', 'x', 'z', '6', 'h', 'x', 'z', '6', 'h', 'x', 'z', '6', 'h', 'x', 'z', '6', 'h',
					'x', 'z', '6', 'h', 'x', 'z', '6', 'h', 'x', 'z', '6', 'h'
				],
				dlMaps: ['x', 'x1', 'x2', 'x3', 'x4', 'x5', 'x6', 'z', 'z4', 'x', 'x1', 'x2', 'x3', 'x4', 'x5', 'x6', 'z',
					'z4', 'x', 'x1', 'x2', 'x3', 'x4', 'x5', 'x6', 'z', 'z4'
				],
				dylMaps: ['0', '0', '0', '0', '0', '1', '0', '0', '0', '0', ],
				xlMaps: ['0', '0', '0', '0', '0', '1', '0', '0', '0', '0'],
				yyMaps: ['0', '0', '0', '0', '0', '1', '0', '0', '0', '0'],
				bettingList: [], // 下注列表
				money: 10,
				drawTheWinnerShow: false,
				drawTheWinnerDomShow: false,
				openX: false, // 闲家开奖
				openXT: false,
				openZ: false, // 庄家开奖
				openZT: false,
				progress: 100, // 进度条
				countdown: 20, // 倒计时
				timer: null
			}
		},
		computed: {
			progressStyle() {
				const deg = (this.progress / 100) * 360; // 将进度转换为角度
				return `background: conic-gradient(#007AFF ${deg}deg, #eee ${deg}deg 360deg);`;
			},
		},
		onShow() {
			this.start()
		},
		onHide() {
			clearInterval(this.timer)
			this.timer = null
		},
		onUnload(){
			clearInterval(this.timer)
			this.timer = null
		},
		methods: {
			start(){
				const countdown = this.countdown
				this.timer = setInterval(() => {
					this.countdown -= 1
					this.progress = Math.ceil(this.countdown / countdown * 100)
					if(this.countdown <= 0) {
						
						this.lottery()
						uni.showToast({
							title: '停止下注',
							duration: 1000,
							icon: 'none'
						});
						clearInterval(this.timer)
						this.timer = null
					}
				},1000)
			},
			// 计算下注金币位置
			countStyle(item) {
				const data = this.items.find(data => data.type === item.type)
				const randomL = Math.floor(Math.random() * (data.maxL - data.minL + 1)) + data.minL;
				const randomT = Math.floor(Math.random() * (data.maxT - data.minT + 1)) + data.minT;
				return `left: ${randomL * 2}rpx;top: ${randomT * 2}rpx;opacity: 1;transition-delay: 0.157506s;`
			},
			selMoney(index) {
				this.activeIndex = index
				this.money = this.chipList[index]
			},
			// 下注
			Betting(item) {
				this.bettingList.push({
					money: this.money,
					type: item.type
				})

				setTimeout(() => {
					this.bettingList[this.bettingList.length - 1].style = this.countStyle(item)
				}, 100)
			},

			// 开奖
			lottery() {
				this.drawTheWinnerDomShow = true;
				setTimeout(() => {
					this.drawTheWinnerShow = true;
				}, 100)
				setTimeout(() => {
					this.openX = true
				}, 1000)
				setTimeout(() => {
					this.openXT = true
				}, 3000)
				setTimeout(() => {
					this.openZ = true
				}, 1500)
				setTimeout(() => {
					this.openZT = true
				}, 3500)


				setTimeout(() => {
					this.drawTheWinnerShow = false;
					this.openX = false;
					this.openXT = false;
					this.openZ = false;
					this.openZT = false;
				}, 7000)
				setTimeout(() => {
					this.drawTheWinnerDomShow = false;
					this.countdown = 20
					this.progress = 100
					this.bettingList = []
					this.start()
				}, 7300)
			},

			getColor(index) {
				if (index == 2) return ''
				const list = ['text-yellow-500', 'text-blue-500', 'text-green-500', 'text-red-500']
				let i = index > list.length - 1 ? index - list.length : index
				return list[i]
			},

			countTop(index) {
				// 第一列
				if (index < 9) {
					return index * 41
				} else {
					return index % 9 * 41
				}
			},
			countLeft(index) {
				if (index < 9) {
					return 0
				} else {
					return Math.floor(index / 9) * 41
				}
			},

			countDlTop(index) {
				// 第一列
				if (index < 6) {
					return index * 41
				} else {
					return index % 6 * 41
				}
			},
			countDlLeft(index) {
				if (index < 6) {
					return 0
				} else {
					return Math.floor(index / 6) * 41
				}
			},

			countDylTop(index) {
				// 第一列
				if (index < 6) {
					return index * 18
				} else {
					return index % 6 * 18
				}
			},
			countDylLeft(index) {
				if (index < 6) {
					return 0
				} else {
					return Math.floor(index / 6) * 18
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	body {
		color: #535d76;
		background-color: #f0f3ff;
		font-size: 3.46667vw;
	}

	.child-view {
		transition: all .35s;
		width: 100%;
		height: 100vh;
		position: relative;
		background-color: rgb(41, 41, 64);

		.info-box {
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			height: 234px;
			z-index: 2;

			.countdown-box {
				width: 60rpx;
				height: 60rpx;
				border-radius: 100%;
				background-color: #1d4ed8;
				position: absolute;
				top: 4.5vw;
				left: 25.33333vw;

				.progress-circle {
					width: 100%;
					height: 100%;
					position: relative;
					border-radius: 50%;
					background-color: #eee;
					overflow: hidden;
				}

				.left-half,
				.right-half {
					position: absolute;
					width: 100%;
					height: 100%;
					background-color: #007AFF;
					clip: rect(0, 50%, 100%, 0);
					/* 裁剪出半圆 */
					transform-origin: center;
				}

				.left-half {
					clip: rect(0, 50%, 100%, 0);
				}

				.right-half {
					clip: rect(0, 100%, 100%, 50%);
				}

				.mask {
					position: absolute;
					width: 80%;
					height: 80%;
					background-color: rgb(41, 41, 64);
					border-radius: 50%;
					top: 10%;
					left: 10%;
				}

				.progress-text {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 24rpx;
					color: #fff;
				}
			}

			.back-home {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				top: 5.33333vw;
				left: 5.33333vw;
				padding: .8vw 3.2vw .8vw 1.06667vw;
				z-index: 10;
			}

			.blur-bg {
				background-color: #fff3;
				backdrop-filter: blur(5.33333vw);
			}
		}

		.content-box {
			position: fixed;
			top: 273.4px;
			height: calc(100% - 273.4px);
			left: 0px;
			right: 0px;
			bottom: 0px;
			overflow-x: hidden;
			overflow-y: auto;
			z-index: 1;
			padding-bottom: 3.2vw;

			.item:nth-child(1) {
				border-left-width: 1px;
				border-top-width: 1px;
				border-radius: 1.33333vw 0 0;
			}

			.item:nth-child(2) {
				border-left-width: 1px;
				border-top-width: 1px;
			}

			.item:nth-child(3) {
				border-width: 1px;
				border-bottom-width: 0;
			}

			.item:nth-child(4) {
				border-right-width: 1px;
				border-top-width: 1px;
			}

			.item:nth-child(5) {
				border-right-width: 1px;
				border-top-width: 1px;
				border-radius: 0 1.33333vw 0 0;
			}

			.item:nth-child(6) {
				border-left-width: 1px;
				border-bottom-width: 1px;
				border-top-width: 1px;
				border-radius: 0 0 0 1.33333vw;
				width: calc(33.3333333% - 2px) !important;
			}

			.item:nth-child(7) {
				border-width: 1px;
				width: calc(33.3333333% - 2px) !important;
			}

			.item:nth-child(8) {
				border-right-width: 1px;
				border-bottom-width: 1px;
				border-top-width: 1px;
				border-radius: 0 0 1.33333vw 0;
				width: calc(33.3333333% - 4px) !important;
			}

			.stageClass {
				background-color: rgb(239 68 68 / 0.15);
			}

			.item {
				border-color: #676877;
				border-style: solid;
				height: 21.33333vw;
				border-width: 0;
				justify-content: center;
				align-items: center;
				display: flex;
				transition: all .5s;
				width: calc(20% - 2px);

			}

			.chips-box {
				.active {
					.dib {
						filter: drop-shadow(0 1.06667vw 1.33333vw yellow);
					}
				}
			}

			.roadmap-box {
				display: flex;
				flex-direction: column;

				.top {
					flex-shrink: 0;
					padding: 1.06667vw 5.33333vw;
					border-radius: 1.33333vw 1.33333vw 0 0;
					background-color: #ffffff1a;
					line-height: 3.73333vw;
					border: .5px solid rgba(255, 255, 255, .1);
					border-bottom: none;
				}

				.line {
					width: 1px;
					// height: 100%;
					background-color: rgba(255, 255, 255, .2);
					// border-left: .5px solid rgba(255, 255, 255, .2);
				}
			}

			.map-title {
				position: absolute;
				z-index: 10;
				padding: .53333vw;
				line-height: 100%;
				left: 0%;
				bottom: 0%;
				color: #ccc;
				pointer-events: none;
				font-size: 3.2vw;
				border-radius: .8vw 0 0;
				opacity: .6;
			}

			.map-bg {
				min-width: 100%;
				background-size: 41rpx 41rpx;
				width: 208rpx;
				height: 100%;
				background-image: linear-gradient(#eee 1px, transparent 0), linear-gradient(90deg, #eee 1px, transparent 0);
			}

			.map-item {
				position: absolute;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: 100%;
				width: 41rpx;
				height: 41rpx;

				&>image {
					border-radius: 100%;
				}
			}
		}
	}

	.poker-open {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99999;
		background-color: #0000001a;
		overflow: hidden;

		.box {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0
		}

		.item {
			width: 50%;
			transition: .5s transform;
			transform: translate(0);



			.card-box {
				width: 100%;
				height: 37.33333vw;
				padding-top: 4.26667vw;
				background-image: linear-gradient(to right, var(--tw-gradient-stops))
			}

			.card {
				height: 18.66667vw;
				position: relative;
				transform-style: preserve-3d;
				transition: 1s transform;
				transition-delay: 1s;

				img {
					height: 100%
				}

				.card-open {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					transform: rotateY(.5turn) translateZ(1px)
				}

			}

			.open {
				transform: rotateY(.5turn)
			}

			.card-x {
				transform: rotate(90deg);
				transition-delay: 1s;
				opacity: 0;
			}

			.open-x {
				opacity: 1
			}

			.title {
				color: #ffffff80;
				margin-top: 3.2vw
			}

			.number {
				position: absolute;
				bottom: 0;
				right: 0;
				font-size: 5.33333vw
			}

			.number-2 {
				left: 0;
				right: auto
			}
		}

		.l {
			transform: translate(-100%)
		}

		.r {
			transform: translate(100%)
		}
	}

	.from-blue-500 {
		--tw-gradient-from: #3b82f6;
		--tw-gradient-to: #1d4ed8;
		--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
	}

	.from-red-500 {
		--tw-gradient-from: #ef4444;
		--tw-gradient-to: #b91c1c;
		--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
	}

	.justify-center {
		justify-content: center
	}

	.chips-item {
		width: 2rpx;
		height: 2rpx;
		position: absolute;
		left: 0;
		top: 0;

		&>img {
			width: 5.33333vw;
			position: absolute;
			left: 0;
			top: 0;
			transition: all .5s ease-in-out;
			z-index: 100;
			pointer-events: none;
			opacity: 0;
		}
	}
</style>